<template>
  <view
    class="address-item ss-flex ss-row-between ss-col-center"
    :class="[{ 'border-bottom': props.hasBorderBottom }]"
  >
    <view class="item-left" v-if="!isEmpty(props.item)">
      <view class="area-text ss-flex ss-col-center">
        <uni-tag
          class="ss-m-r-10"
          size="small"
          custom-style="background-color: var(--ui-BG-Main); border-color: var(--ui-BG-Main); color: #fff;"
          v-if="props.item.is_default"
          text="默认"
        ></uni-tag>
        设备id：{{props.item.device_id}} 
      </view>
	  <view class="person-text">ip地址：{{ props.item.ip_address }}</view>
      <view class="person-text">手机号：{{ props.item.alert_phone }}</view>
      <view class="person-text">支付类型：{{props.item.device_type}}</view>
	  <view class="person-text"
	  v-if="props.item.device_type !== 'sell'">
	  租赁到期日期：{{ formatDate(props.item.lease_expiration_time_text) }}</view>
    </view>
    <view v-else><view class="address-text ss-m-b-10">请选择收货地址</view></view>
    <slot>
		<button class="pay-button" @tap="submitOrder">支付</button>
		<!-- <button class="pay-button" @tap="onSharedevice">生成</button> -->
		<button class="pay-button" @tap="onDelete">删除</button>
      <button class="ss-reset-button edit-btn" @tap.stop="onEdit">
        <view class="edit-icon ss-flex ss-row-center ss-col-center">
          <image :src="sheep.$url.static('/assets/addons/shopro/uniapp/user/address/edit.png')"></image>
        </view>
      </button>
    </slot>
  </view>
</template>

<script setup>
  /**
   * 基础组件 - 地址卡片
   *
   * @param {String}  icon = _icon-edit    - icon
   *
   * @event {Function()} click			 - 点击
   * @event {Function()} actionClick		 - 点击工具栏
   *
   * @slot 								 - 默认插槽
   */
  import sheep from '@/sheep';
  import { isEmpty } from 'lodash';
  import $share from '@/sheep/platform/share';
  import { computed, reactive } from 'vue';
    import { showShareModal, showAuthModal } from '@/sheep/hooks/useModal';
  const props = defineProps({
    item: {
      type: Object,
      default() {},
    },
    hasBorderBottom: {
      type: Boolean,
      defult: true,
    },
  });
  const formatDate = (dateStr) => {
    if (!dateStr) return ''; // 防止空值出错
    const date = new Date(dateStr);
    return date.toLocaleDateString(); // 默认格式为 YYYY-MM-DD
  };
  const emit = defineEmits(['deviceDeleted']);
const state = reactive({
    deviceInfo: {},
  });
  const onEdit = () => {
	  console.log(props.item)
    sheep.$router.go('/pages/user/device/edit', {
      id: props.item.id,
    });
  };
  const order_sn={};
  function pay(order_sn){
	  console.log(order_sn)
	  sheep.$router.go('/pages/user/device/pay', {
		order_sn:order_sn
	  });
  };
  async function submitOrder() {
  	// console.log(state.orderPayload);
  	const {
  		code,
  		data
  	} = await sheep.$api.user.device.create(props.item.device_id);
  	if (code === 1) {
  		const order_sn = data.order_sn;
  		pay(order_sn);
  	}
  }
  function onSharedevice() {
    state.deviceInfo = $share.getShareInfo(
      {
        params: {
          page: '6',
        },
      },
    );
    showShareModal();
  }
  //删除设备
  const onDelete = () => {
  	uni.showModal({
  		title: '提示',
  		content: '确认删除此设备吗？',
  		success: async function(res) {
  			if (res.confirm) {
  				const {
  					code
  				} = await sheep.$api.user.device.delete(props.item.id);
				if (code === 1) {
				// 删除成功后通知父组件刷新数据
				// 通过 $emit 向父组件发送事件，通知删除成功
				emit('deviceDeleted', props.item.id); 
				}
  			}
  		},
  	});
  };
</script>

<style lang="scss" scoped>
  .address-item {
    padding: 24rpx 30rpx;
	position: relative;

    .item-left {
      width: 600rpx;
    }

    .area-text {
      font-size: 26rpx;
      font-weight: 400;
      color: $dark-9;
    }

    .address-text {
      font-size: 32rpx;
      font-weight: 500;
      color: #333333;
      line-height: 48rpx;
    }

    .person-text {
      font-size: 28rpx;
      font-weight: 400;
      color: $dark-9;
    }
  }

  .edit-btn {
    width: 44rpx;
    height: 44rpx;
    background: $gray-f;
    border-radius: 50%;

    .edit-icon {
      width: 24rpx;
      height: 24rpx;
    }
  }
  image {
    width: 100%;
    height: 100%;
  }
  .pay-button{
	  width: 150rpx;
	  height: 50rpx;
	  background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
	  border-radius: 80rpx;
	  font-size: 30rpx;
	  line-height: 50rpx;
	  color: $white;
	  padding: 0rpx 25rpx;  /* 上下 10px，左右 20px */
	  margin-left: 5rpx;
	  margin-top:80rpx;
  }
</style>
